<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test1"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制，引入后全局多了一个PropTypes对象 -->
  <script src="../lib/prop-types.js"></script>

	<script type="text/babel">

    /*
    1.初始化阶段:由ReactDOM.render()触发---初次消染
        1.constructor()
        2.componentWillMount()
        3.render()
        4.componentDidMount()  ========> 常用
            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
    2.更新阶段:由组件内部this.setSate()或父组件render触发
        1.shouldcomponentUpdate()
        2.componentWillUpdate()
        3.render()  ========> 必须要有一个
        4.componentDidUpdate()
    3.卸我组件:由ReactDoM.unmountComponentAtNode()触发
        1.componentWillUnmount()  ========> 常用
            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
    */

    class Count extends React.Component{
      constructor(props) {
        console.log('Count --- constructor');
        super(props);
      }

      state = {
        count: 0
      }

      add = () => {
        this.setState({
          count: this.state.count+1
        })
      }
      xiezai = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test1'));
      }

      // 组件将要挂载的钩子
      componentWillMount() {
        console.log('Count --- componentWillMount');
      }

      // 组件挂在完毕的钩子
      componentDidMount() {
        console.log('Count --- componentDidMount');
      }

      // 组件将要卸载的钩子
      componentWillUnmount() {
        console.log('Count --- componentWillUnmount');
      }

      // 控制组件更新的阀门，如果不写，默认返回true
      shouldComponentUpdate(nextProps, nextState) {
        console.log('Count --- shouldComponentUpdate');
        // return false; // 阀门关闭，组件不更新
        return true; // 阀门打开，组件更新
      }

      // 组件将要更新的钩子
      componentWillUpdate() {
        console.log('Count --- componentWillUpdate');
      }

      // 组件更新完毕的钩子
      componentDidUpdate() {
        console.log('Count --- componentDidUpdate');
      }

      // 初始化渲染、状态更新之后
      render() {
        console.log('Count --- render');
        return (
          <div>
            <h2>求和：{this.state.count}</h2> 
            <button onClick={this.add}>点我+1</button>
            <br/>
            <button onClick={this.xiezai}>卸载组件</button>
          </div>
        )
      }
    }

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(<Count/>, document.getElementById('test1'));
	</script>
</body>
</html>